@charset "UTF-8";

//helps
//@import "helpers/functions";
//@import "helpers/mixins";
//@import "helpers/helpers";
@import "base/fonts";


//Variables
$primary-color: #8B7567;
$border-color: #EEE;
$disabled-color: #ccc;
$header-bar-height: 44px;
$footer-bar-height:50px;

.mui-title{
	color:$primary-color;
}
.hidden{
	display:none;
}
.iconfont{
	margin-right:5px;
}
.mui-content::-webkit-scrollbar {
    display: none;
}
.home{
	background:#333 url(../images/cloud_bg.png);
}
.mui-content{
	.home &{
		background:#333 url(../images/cloud_bg.png);
	}

	.hidden ~&{
		top:0 !important;
		padding-top:0 !important;
	}
	
}


ul{
	padding:0;
	margin:0;
}



#profile-panel{
	.mui-card{
		margin:0 !important;
		border-radius:0px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	}
	li{
		list-style:none;
		margin:0;

	}

	.mui-card-content-inner{
		display:table;
		width:100%;
		margin:0;
		padding:10px;
		
		li{
			
			display:table-cell;

			&.address{
				width:90%;
				//border:1px solid #CCC;
			}
			&.telephone{
				border-left:1px solid $border-color;
				text-align:right;
				
			}
			.icon-telephone{
				font-size:24px;
				color:#CC1815;
			}

			a{
				color:#999;
			}
		}
	}

	ul.mui-card-footer{
		$footer-height:44px;
		$link-circle-width:30px;

		margin:0;
		padding:0;
		li{
			flex:1;
			height:$footer-height;
			line-height:$footer-height;
			border-right:1px solid $border-color;
			text-align:center;

		}

		.button-group{
			flex:2;
			display:flex;
			align-items: center;
			padding:0px 10px;

			li{
				border:0;
			}


			.iconfont{
				font-size:18px;
				color:#FFF;
				margin:0;

				display:inline-block;
				background:$primary-color;
				border-radius:50%;
				height: $link-circle-width;
				line-height: $link-circle-width;
				width: $link-circle-width;
				text-align:center;
			}
			.icon-share-outerline{
				background:#5E0D0A;
			}
			.icon-heart-outerline{
				background:#523F1A;
			}
			.icon-web-outerline{
				background:#7A5830;
			}
			.icon-QRCode-outerline{
				background:#A3210F;
			}

			

		}

		.iconfont{
			transform: translateY(15%) ;
		}

		.mui-disabled{
			color:$disabled-color;
		}
		
	}

	
}

#photo-album{
	padding-top:10px;


	.mui-slider-item{
		width: 60%;
		border: 5px solid #FFF;
		margin:0 2%;
		transform: translateX(33%) ;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	}

	.zoom-out{
		transform: scale(.8, .8) translateX(33%);
	}

	.swiper-container {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 50px;
    }
    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 200px;
        height: 180px;
        border: 5px solid #FFF;
        box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.5);
    }
    .swiper-pagination-bullet{
    	background:#666;
    	opacity: .8;
    }
    .swiper-pagination-bullet-active{
    	background: #ca2a26;
    }
}

.intro{
	.banner{
		width: 100%;
	    height: 180px;
	    background-position: center;
	    background-size: cover;
	}
	.mui-content{
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		padding:0;

		overflow-y:scroll;
		overflow-x:hidden;
	}

	.mui-bar-tab ~{
		& .mui-content{
			bottom:$footer-bar-height;
		}
	}
	.mui-bar-nav ~{
		& .mui-content{
			top:$header-bar-height;
		}
	}

	#nav{
		background:rgba(0,0,0,.3);
		padding:5px;
		ul{
			border:1px solid #5B422A;
			border-radius:2px;
			li{
				line-height:30px;

				&.active{
					background:#5B422A;

					a{
						color:#FFF;
					}
					
				}

			}

		}
	}
	.nav-wrapper{
		background:#FFF;
		padding:2px;
		border-radius:4px;
		box-shadow: 0 0px 1px 0px rgba(0, 0, 0, 0.1);
	}

	.content{
		padding:1rem;
		background: #FFF;
		box-shadow: 0 1px 2px  1px rgba(0, 0, 0, 0.08);
		margin: 10px;

		img{
			max-width:100%;
		}
	}

	section{
		padding-top:.5rem;
	}

	h2{
		&.title{
			font-size:18px;
		}
		&:before{
			content:'';
			height:20px;
			width:4px;
			background:#222;
			display:inline-block;
			margin-right:10px;
			margin-bottom:-3px;
		}
		&:after{
			content:'';
			height:1px;
			background:#CCC;
			width:68%;
			display:block;
			position:absolute;
			margin-left:30%;
			margin-top:-5px;
		}
	}
	
}

ul{
	list-style:none;
	nav &{
		display:flex;
		
		li{
			flex:1;
			text-align:center;
			list-style:none;
		}
		a{
			//background:#333;
			display:block;
			//border:1px solid #CCC;
		}
	}
	.content &{
		li{
			font-size:14px;
			line-height:24px;
			color:#666;
		}
		&.square{
			padding:1rem;
			list-style:square;
		}
	}
}

.navFix{
	position: fixed !important;
	left:0;
	right:0;
	width:100%;
	z-index:1000;
	top: $header-bar-height;
	.mui-bar-nav.hidden ~.mui-content > &{
		top: 0;
	}
}
.fixPadding{
	padding-top:$header-bar-height;
}

.header-wrapper{
	//background-position: center;
	//background-size: cover;
	//background-size:100% auto;
	height:60px;
	//background:#FFF;
	padding:1rem;
	margin-top:15px;

	h1{
		margin:0;
		text-align:center;
		font-size:24px;
	}

}
#loading-wrapper,
#mask{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:10000;
	background:#000;
}

#loading{
	width:30px;
	height:30px;
	margin-left:50%;
	margin-top:75%;
	transform:translateX(-50%);
}

#mask{
	
	background:rgba(0,0,0,.9);
	z-index:9999;

	p{
		text-align:center;
		margin:10px;
		color:#555;
	}

	.iconfont{
		color:#FFF;
	}

	#QR-code{
		display:inline-block;
		margin-left:50%;
		margin-top:30%;
		transform:translateX(-50%);
	}



	canvas{
		display:none;
	}
	img{
		background:#FFF;
		width:180px;
		height:180px;
		border:5px solid #FFF;
	}
}

#copyright{
	//position:fixed;
	width:100%;
	text-align:center;
	color:#666;
	margin-top:1rem;
	//bottom:60px;
}








